
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Zzz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="__CSS__/mui.min.css">
</head>

<body>
<div class="mui-content">
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll" >
            <!--数据列表-->
            <div id="card_con">
            </div>
            <!--<div class="mui-card">-->
                <!--<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>-->
                <!--<div class="mui-card-content">-->
                    <!--<div class="mui-card-content-inner">-->
                        <!--<p>Posted on January 18, 2016</p>-->
                        <!--<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="mui-card-footer">-->
                    <!--<a class="mui-card-link">Like</a>-->
                    <!--<a class="mui-card-link">Read more</a>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
</body>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/mui.min.js"></script>
<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            // down: {
            //     callback: pulldownRefresh
            // },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });

    var page = 1;
    var count = 10;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {
            $.get("{:url('index/getdata')}",{"page":page,"count":count},function (rs) {
                if(rs.code){
                    if(rs.msg.length){
                        var html = '';
                        $(rs.msg).each(function (i,v) {
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false)
                            html += '<div class="mui-card">';
                            html += '<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url('+v.cover_pic+')"></div>';
                            html += '<div class="mui-card-content">';
                            html += '<div class="mui-card-content-inner">';
                            html += '<p>'+v.title+'</p>';
                            html += '<p style="color: #333;">'+v.summary+'</p>';
                            html += '</div></div>';
                            html += '<div class="mui-card-footer">';
                            html += '<a class="mui-card-link">'+v.create_time+'</a>';
                            html += '<a href="/index.php/index/index/article_info?aid='+v.id+'" class="mui-card-link">查看全文</a>';
                            html += '</div></div>';
                        })
                        $("#card_con").append(html)
                        page++;
                    }else{
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)
                    }
                }else{
                    mui.alert(rs.msg)
                }
            })

        }, 500);
    }
    if (mui.os.plus) {
        mui.plusReady(function() {
            setTimeout(function() {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            }, 500);

        });
    } else {
        mui.ready(function() {
            mui('#pullrefresh').pullRefresh().pullupLoading();
        });
    }
</script>

</html>